![Introducing Dashboard Analytics](https://cdn.sanity.io/images/cgdhsj6q/production/af327c5bd94708db501516a75da6870aef894c64-2286x1522.png?w=400&fit=max&auto=format)
Product
Introducing Dashboard Analytics
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
postcss-reporter
Advanced tools
The postcss-reporter npm package is a PostCSS plugin used to log PostCSS messages in the console. It is designed to report warnings or messages from other PostCSS plugins in a clear and readable format. This helps developers understand and address issues during the CSS processing workflow.
Logging Messages
This feature allows the logging of messages from other PostCSS plugins. The 'clearReportedMessages' option clears the messages after they are logged, preventing duplicate reporting.
postcss([ require('autoprefixer'), require('postcss-reporter')({ clearReportedMessages: true }) ]).process(css, { from: undefined }).then(result => { console.log(result.css); });
Custom Formatter
This feature allows developers to define a custom formatter function to format the output of the messages according to their needs.
postcss([ require('postcss-reporter')({ formatter: function(input) { return 'Total warnings: ' + input.messages.length; } }) ]).process(css, { from: undefined }).then(result => { console.log(result.css); });
This package is similar to postcss-reporter as it also focuses on logging warnings from PostCSS plugins. However, it is more specific to warnings and does not provide as much flexibility in terms of custom formatting or handling different types of messages.
While primarily a CSS linter, stylelint can be used in conjunction with PostCSS to report issues in CSS files. It offers a broader range of rules and configurations compared to postcss-reporter, which is focused only on reporting and formatting messages from other plugins.
A PostCSS plugin to console.log()
the messages (warnings, etc.) registered by other PostCSS plugins.
As of PostCSS 4.1, a single PostCSS process can accumulate messages from all of the plugins it uses. Most of these messages are warnings. Presumably, plugin authors want you to see those messages. So this plugin exists to read the accumulated messages (or messages from only the plugins you've specified), format them, and print them to the console.
By default, the messages are formatted for human legibility and sorted according to the line/column positions attached to the messages. But another formatting function can be passed in with an option, and sorting can be turned of with an option.
npm install postcss-reporter
Version 1.0.0+ is compatible with PostCSS 5+. (Earlier versions are compatible with PostCSS 4.)
Add it to your plugin list after any plugins whose messages you want to log, and optionally pass it an object of options.
For example, using gulp-postcss:
gulp.task('css', function() {
return gulp.src('./src/*.css')
.pipe(postcss([
bemLinter(),
customProperties(),
calc(),
rejectAllColors(),
reporter(myOptions) // <------ ding
]))
.pipe(gulp.dest('./dist'));
});
clearMessages (boolean, default = false
)
If true, the plugin will clear the result's messages after it logs them. This prevents other plugins, or the whatever runner you use, from logging the same information again and causing confusion.
formatter (function, default = the default formatter)
By default, this reporter will format the messages for human legibility in the console. To use another formatter, pass a function that
messages
array and a source
stringFor example, you could write a formatter like this:
reporter({
formatter: function(input) {
return input.source + ' produced ' + input.messages.length + ' messages';
}
})
plugins (array of strings, default = []
)
If plugins
is empty (as it is by default), the reporter will log messages from every PostCSS plugin.
There are 2 ways to limit output:
{ plugins: ['postcss-bem-linter'] }
will only log messages from the postcss-bem-linter
plugin.!
to specify only those plugins whose messages you would like to hide.
(All other plugins will be shown.)
For example, { plugins: ['!postcss-bem-linter'] }
will never log messages from the postcss-bem-linter
plugin; but will log messages from every other plugin.filter (function)
Provide a filter function. It receives the message object and returns a truthy or falsy value, indicating whether that particular message should be reported or not.
For example, function(message) { return message.type === 'warning'; }
will only log warning
messages, regardless of the plugin.
throwError (boolean, default = false
)
If true
, after the plugin logs your messages it will throw an error if it found any warnings.
sortByPosition (boolean, default = true
)
If false
, messages will not be sorted by line/column position.
positionless ("first"|"last"|"any"
, default = "first"
)
By default, messages without line/column positions will be grouped at the beginning of the output.
To put them at the end, instead, use "last"
.
To not bother sorting these, use "any"
.
noIcon (boolean, default = false
)
If true
, no exclamatory triangle icons will be printed next to warnings.
noPlugin (boolean, default = false
)
If true
, plugin names will not be printed in brackets after messages.
If you would like no colors in the console output, simply pass --no-colors
when you invoke whatever command runs this plugin. (This works because of chalk.)
You can also use this module's formatter as a library, with following API:
var formatter = require('postcss-reporter/lib/formatter');
var myFormatter = formatter(myOptions);
// to use defaults, just pass no options: `formatter()`
var warningLog = myFormatter({
messages: someMessages,
source: someSource
});
console.log(warningLog);
These are the formatter's options:
true
)false
) - Do not print any warning exclamatory triangle iconsfalse
) - Do not print plugin names1.4.1
filter
option.plugins
option with !
prefix`.FAQs
Log PostCSS messages in the console
The npm package postcss-reporter receives a total of 990,999 weekly downloads. As such, postcss-reporter popularity was classified as popular.
We found that postcss-reporter demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
Security News
A new OpenSSF report uncovers critical gaps in secure software training, with 75% of new developers unfamiliar with secure practices, highlighting urgent educational needs.
Security News
The 2023 Python Developers Survey reveals key trends in packaging, web frameworks, and developer demographics, highlighting a shift toward innovative tools as the Python community diversifies and grows among less experienced developers.